<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts" setup>
  import { PropType, ref, Ref } from 'vue'
  import { useECharts } from '/@/hooks/web/useECharts'
  defineProps({
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '70vh',
    },
  })

  const chartRef = ref<HTMLDivElement | null>(null)
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)
  const loadData = (datas: Array<Array<number>>, option) => {
    setOptions({
      backgroundColor: '#1f1f1f', // 暗色背景
      animation: false,
      axisLabel: {
        interval: 0,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line', // 使用直线指针
          lineStyle: {
            color: '#758696', // 指针线的颜色
          },
          label: {
            show: true,
            backgroundColor: '#333',
          },
        },
        textStyle: {
          color: '#fff', // 提示文字颜色
        },
      },
      legend: {
        show: true,
        textStyle: {
          color: '#ccc', // 图例文字颜色
        },
        itemWidth: 14, // 图例标记的图形宽度
        itemHeight: 5, // 图例标记的图形高度
        itemGap: 20, // 图例每项之间的间隔
      },
      grid: {
        // 调整图表的位置，避免边缘被切割
        left: '3%',
        right: '10%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: {
        name: option?.xAxis?.name,
        nameTextStyle: {
          color: '#fff',
        },
        type: 'category',
        boundaryGap: false, // 两边留白策略
        data: (() => {
          try {
            let count = datas[0].length
            if (!count) return []
            let x = [] as any
            for (let i = 0; i < count; i++) {
              x.push(+(i / count).toFixed(4))
            }
            return x
          } catch (e) {}
        })(),
        axisLine: {
          lineStyle: {
            color: '#333', // x轴颜色
          },
        },
        splitLine: {
          // 网格线
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisTick: {
          // 刻度线
          show: false,
        },
        axisLabel: {
          // 刻度标签
          color: '#ccc', // 文字颜色
        },
      },
      yAxis: {
        name: option?.yAxis?.name,
        nameTextStyle: {
          color: '#fff',
        },
        type: 'value',
        axisLine: {
          lineStyle: {
            color: '#333', // y轴颜色
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#333',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#ccc', // 文字颜色
        },
      },
      series: [
        {
          name: 'X轴',
          type: 'line',
          smooth: true, // 曲线平滑
          symbol: 'none', // 去掉点标记
          lineStyle: {
            width: 1,
            color: '#00b0f0', // 系列颜色
          },
          data: datas != null && datas.length == 3 ? datas[0] : [],
        },
        {
          name: 'Y轴',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#f1c40f',
          },
          data: datas != null && datas.length == 3 ? datas[1] : [],
        },
        {
          name: 'Z轴',
          type: 'line',
          smooth: true,
          symbol: 'none',
          lineStyle: {
            width: 1,
            color: '#2ecc71',
          },
          data: datas != null && datas.length == 3 ? datas[2] : [],
        },
      ],
    })
  }
  defineExpose({ loadData })
</script>
